<template>
    <div class="dashboard-container" v-loading="loading">
        <div class="app-container">
            <el-card class="tree-card">
                <!-- 头部标题部分 -->
                <tree-tools :tree-node="company" :is-root="true"></tree-tools>
                <!-- 树 -->
                <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
                    <!-- 子节点 -->
                    <tree-tools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
                </el-tree>
            </el-card>
            <!-- 弹出添加部门弹窗 -->
            <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments"/>
        </div>
    </div>
</template>

<script>
import TreeTools from './components/tree-tools'
import AddDept from './components/add-dept'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {

    components: {
        TreeTools, AddDept
    },

    data () {
        return {
            company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
            defaultProps: {
                label: 'name'
            },
            departs: [
                { name: '总裁办', children: [{ name: '董事会' }] },
                { name: '新政部' },
                { name: '人事部' },
            ],
            showDialog: false,  // 显示窗体，
            node: {},           // 添加部门时，记录当前子节点    
            loading: false,     // 用来控制进度弹层的显示和隐藏
        }
    },

    created () {
        this.getDepartments()
    },

    methods: {

        /**
         * @description: 获取组织架构树数据
         * @author: Yong
         * @function   getDepartments
         * @return {*} 
         * @date: 2021-05-14 16:57:23
         */
        
        async getDepartments () {
            this.loading = true
            const res = await getDepartments()
            this.company = { name: res.companyName, manager: '负责人' }
            this.departs = tranListToTreeData(res.depts, '')
            this.loading = false
        },

        /**
         * @description: 添加部门
         * @author: Yong
         * @function   addDepts
         * @param {*}  node 当前节点
         * @param {*}  参数
         * @return {*} 
         * @date: 2021-05-14 16:58:17
         */
        
        addDepts (node) {
            this.showDialog = true // 显示弹层
            // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
            this.node = node
        },

        /**
         * @description: 编辑部门
         * @author: Yong
         * @function   editDepts
         * @param {*}  node 当前节点
         * @param {*}  参数
         * @return {*} 
         * @date: 2021-05-14 16:58:38
         */
         editDepts (node) {
            this.showDialog = true // 显示弹层
            // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
            this.node = node
            // 根据ID获取部门详情-调用组件的方法传入ID
            this.$refs.addDept.getDepartDetail(node.id)
        },
    }

}
</script>

<style scoped>
.tree-card {
    padding: 30px 140px;
    font-size: 14px;
}
</style>
